import React, { Component } from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';

import { colors, dimens, strings, defaultAvatar } from '../../utils/constants';

const AVATAR_SIZE = 72;
const AVATAR_RADIUS = AVATAR_SIZE / 2;

const Root = styled.View`
  width: 100%;
  backgroundColor: ${colors.WHITE};
  marginTop: ${dimens.MARGIN};
  borderTopWidth: ${dimens.HR_WIDTH};
  borderBottomWidth: ${dimens.HR_WIDTH};
  borderColor: ${colors.HR};
`;

const PortraitLine = styled.View`
  flexDirection: row;
  width: 100%;
  alignItems: center;
  paddingTop: ${dimens.PADDING};
  paddingRight: ${dimens.PADDING};
  paddingLeft: ${dimens.PADDING};
  paddingBottom: ${dimens.PADDING};
  borderBottomWidth: ${dimens.HR_WIDTH};
  borderColor: ${colors.HR};
`;

const Avatar = styled.Image`
  width: ${AVATAR_SIZE};
  height: ${AVATAR_SIZE};
  borderRadius: ${AVATAR_RADIUS};
`;

const NameContent = styled.View`
  flexDirection: column;
  marginLeft: 10;
`;

const NameText = styled.Text`
  fontSize: 17;
  color: ${colors.PRIMARY_TEXT};
`;

const BriefText = styled.Text`
  fontSize: 13;
  color: ${colors.SECONDARY_TEXT};
  marginTop: 5;
`;

const TweetDetailsLine = styled.View`
  flexDirection: row;
  width: 100%;
`;

const ItemButton = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  minHeight: 48;
  flexDirection: column;
  flex: 1;
  alignItems: center;
  justifyContent: center;
`;

const CountText = styled.Text`
  fontSize: 14;
  color: ${colors.PRIMARY_TEXT};
`;

const TitleText = styled.Text`
  fontSize: 12;
  color: ${colors.SECONDARY_TEXT};
`;

class ProfileCard extends Component {
  render() {
    const {
      avatar, nickname, brief,
      tweetCount, followCount, followerCount
    } = this.props;

    return (
      <Root>
        <PortraitLine>
          <Avatar source={{ uri: avatar || defaultAvatar }} />
          <NameContent>
            <NameText>{nickname || '没有设定昵称'}</NameText>
            <BriefText>{brief || strings.DEFAULT_BRIEF}</BriefText>
          </NameContent>
        </PortraitLine>
        <TweetDetailsLine>
          <ItemButton>
            <CountText>{tweetCount || 0}</CountText>
            <TitleText>{strings.PROFILE_WEIBO}</TitleText>
          </ItemButton>
          <ItemButton>
            <CountText>{followCount || 0}</CountText>
            <TitleText>{strings.PROFILE_FOLLOW_COUNT}</TitleText>
          </ItemButton>
          <ItemButton>
            <CountText>{followerCount || 0}</CountText>
            <TitleText>{strings.PROFILE_FOLLOWER_COUNT}</TitleText>
          </ItemButton>
        </TweetDetailsLine>
      </Root>
    );
  }
}

export default ProfileCard;
